<template>
  <div class="shou">
    <van-nav-bar title="首页" fixed placeholder/>
    
    <!-- 轮播图及搜索框 -->
    <div class="swipe-se">
     <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in list" :key="item">
          <img :src="item" alt="" />
        </van-swipe-item>
      </van-swipe>
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        background="transparent"
        shape="round"
      />
    </div>
    
    <van-grid>
      <van-grid-item icon="point-gift-o" text="每日福利" />
      <van-grid-item icon="hot-sale-o" text="热销榜" />
      <van-grid-item icon="goods-collect-o" text="皮鲁精选" />
      <van-grid-item icon="credit-pay" text="会员中心" />
    </van-grid>

    <ul class="sh-tab1">
      <li>
        <span>全球奶粉</span>
        <img src="../../assets/img/baby.webp" alt="">
      </li>
      <li>
        <span>尿不湿</span>
        <img src="../../assets/img/baby.webp" alt="">
      </li>
      <li>
        <span>营养辅食</span>
        <img src="../../assets/img/baby.webp" alt="">
      </li>
      <li>
        <span>宝宝洗护</span>
        <img src="../../assets/img/baby.webp" alt="">
      </li>
    </ul>
    
    <!-- 下拉加载 --> 
    <!-- 推荐商品 -->
    <van-sidebar v-model="activeKey">
      <van-sidebar-item title="推荐商品" />
    </van-sidebar>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
    <van-card
    v-for="item in list2" :key="item.productId"
      :price="item.currentPrice"
      :origin-price="item.originalPrice"
      :title="item.productName"
      :thumb=item.imgUrl
    />
  </van-list>

  </div>
</template>

<script>
import { getBannerApi, getRecommendApi } from "@/utils/api";
export default {
  data() {
    return {
      value: "",
      list: [],
      list2: [],
      loading: false,
      finished: false,
      activeKey: 0,
      count:4,
      page:1,
    };
  },

  components: {},

  computed: {},

  created() {
    this.getBanner();
  },
  methods: {
    async getBanner() {
      const res = await getBannerApi();
      if (res.status === "0") {
        this.list = res.result.list;
      }
    },
    onLoad() {
      getRecommendApi({ count: this.count, page: this.page }).then(res => {
        if (res.status === "0") {
          this.list2.push(...res.result.list);
          this.loading = false; 
          this.page++;
        }
        if (this.list2.length >= 8) {
          this.finished = true;
        }
      });
    }
  }
};
</script>

<style lang="less" >
.shou {
  .van-nav-bar__title {
    font-weight: 900;
  }
  .my-swipe .van-swipe-item {
    background-color: #39a9ed;
  }
  .swipe-se {
    position: relative;
    img {
      width: 100%;
      height: 200px;
      display: block;
    }
    .van-search {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }
    .van-search__content {
      background: rgba(255, 255, 255, 0.5);
    }
    .van-field__control::placeholder {
      color: #fff;
    }
  }
  .sh-tab1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 20px;
    li {
      display: flex;
      width: 45%;
      padding: 10px;
      margin-bottom: 10px;
      background-color: rgba(163, 145, 145, 0.3);
      border-radius: 10px;
      span {
        font-size: 14px;
        width: 50%;
        font-weight: 800;
      }
      img {
        width: 60px;
        height: 60px;
      }
    }
  }
  .van-sidebar-item--select {
    background-color: transparent;
  }
}
</style>
